<template>
  <div class="article-edit">
    <el-form ref="editActivelref" :model="editArticleform" label-width="80px">
      <!-- 文章标题 -->
      <el-form-item label="文章标题">
        <el-input v-model="editArticleform.title"></el-input>
      </el-form-item>
      <!-- 文章内容 -->
      <el-form-item label="文章内容">
        <quill-editor
          ref="myQuillEditor"
          v-model="editArticleform.articleBody"
        />
      </el-form-item>
      <!-- 视频地址 -->
      <el-form-item label="视频地址">
        <el-input v-model="editArticleform.videoURL"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('colse')">取消</el-button>
        <el-button type="primary" @click="editArticleData">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { update } from '../../api/hmmm/articles'
export default {
  name: 'modifyTheArticle',
  props: {
    editlist: {
      type: Object,
      required: true
    }
  },
  components: {
    quillEditor
  },
  data() {
    return {
      editArticleform: {
        title: '',
        articleBody: '',
        videoURL: null
      },
      editorOption: {} // 富文本配置对象
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 点击确定修改数据
    async editArticleData() {
      this.$emit('editArtdata')
      try {
        const { data: res } = await update({
          id: this.editlist.id,
          title: this.editArticleform.title,
          articleBody: this.editArticleform.articleBody,
          videoURL: this.editArticleform.videoURL
        })
        console.log(res)
        this.$message.success('修改成功')
      } catch (error) {
        console.log(error)
        this.$message.error('修改失败')
      }
    }
  },
  created() {
    this.editArticleform.title = this.editlist.title
    this.editArticleform.articleBody = this.editlist.articleBody
    this.editArticleform.videoURL = this.editlist.videoURL
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
/deep/.ql-editor {
  height: 100px;
}
</style>
